import { useState, useEffect } from 'react'
import { resourcePath } from '../../../utils/resource';
import DarkCard from '../DarkCard';
export default function PanelLeft(props) {
    // return <DarkCard className={props.className} style={{
    //     width: 350,
    //     overflow: "auto",
    //     position: "absolute",
    //     left: 0,
    //     top: 20,
    //     bottom: 20,
    //     // height: 300,
    //     ...props.style
    // }}>
    //     {props.children}
    // </DarkCard>
    return <div style={{
        position: 'absolute',
        left: 0,
        width: 600,
        top: 0,
        bottom: 0,
        background: `url(${resourcePath.panelLeftPng})`,
        // background: "linear-gradient(to right, #003265ee, #00326500)",
        zIndex: 1,
        pointerEvents: 'none'
    }}>
        <div className={props.className} style={{
            width: 350,
            overflow: "auto",
            position: "absolute",
            left: 20,
            top: 8,
            bottom: 20,
            pointerEvents: 'auto',
            // height: 300,
            ...props.style
        }}>
            {props.children}
        </div>

    </div>;
}